<template>
  <div class="aside">
    <el-menu
      text-color="#fff"
      active-text-color="#7DE9FF"
      default-active="1"
      :collapse-transition="false"
      class="el-menu-vertical-demo font-20 fontW-b font-f-ib"
      :collapse="isCollapse"
      @open="handleOpen"
      @select="hundleSelect"
      @close="handleClose">
      <!-- 一级菜单 -->
      <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
        <!-- 一级菜单的模板区域 -->
        <template slot="title">
          <div class="font-f-iR  flex-s-between" v-if="item.niuID===1">
            <div>
              <span class="theme-color font-16 fontW-7">{{$t('sideba.'+ item.authName)}}</span>
            </div>
          </div>
          <div class="font-f-iR  flex-s-between" v-else>
            <div>
              <img class="mgr-5" src="../../assets/icon/evtype.svg" alt="">
              <!-- 文本 -->
              <span class="theme-color font-16 fontW-7">{{$t('sideba.'+ item.authName)}}</span>

            </div>
            <div class="font-10 fontW-4 mgr-20 ">44{{item.niuID}}</div>
          </div>
        </template>
        <!-- 二级菜单 -->
        <el-menu-item :index="sunItem.id + ''" v-for="sunItem in item.children" :key="sunItem.id">
          <template slot="title">
            <label class="font-10 fontW-4 font-f-iR flex-s-between sunItemlabel" style="width:100%" v-if="sunItem.cid">
              <div class="">
                <el-checkbox  class="mgb-5" ></el-checkbox>
                <span>{{$t('sideba.'+ sunItem.authName)}}</span>
              </div>
              <div>44</div>
            </label>
             <label class="font-10 fontW-4 font-f-iR flex-s-between sunItemlabel" style="width:100%" v-else>
              <div class="">
                <el-checkbox  class="mgb-5" ></el-checkbox>
                <span >{{ sunItem.authName }}</span>
              </div>
              <div>44</div>
            </label>
            <!-- 文本 -->
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
     <div class="hmenu" v-if="AsideType === 1">
      <el-menu
        text-color="#fff"
        active-text-color="#7DE9FF"
        default-active="1"
        :collapse-transition="false"
        class="el-menu-vertical-demo font-20 fontW-b font-f-ib bg-58"
        :collapse="isCollapse"
        @open="handleOpen"
        @select="hundleSelect"
        @close="handleClose"
        :default-openeds="selectedIndexs"
        ref="menus">
        <!-- 一级菜单 -->
        <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
          <!-- 一级菜单的模板区域 -->
          <template slot="title">
            <!-- 图标 -->
            <!-- <i :class="iconsObj[item.id]"></i> -->
            <!-- <i class="el-icon-menu"></i> -->
            <img :src="item.img_url" alt="">
            <!-- 文本 -->
            <span class="">{{$t('sideba.'+ item.authName)}}</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item :index="sunItem.id + ''" v-for="sunItem in item.children" :key="sunItem.id" class="border-r" style="padding-left:10px">
            <template slot="title" >
              <!-- 二级菜单的模板区域 -->
              <!-- <i class="el-icon-menu"></i> -->
              <!-- <i class="el-icon-s-help"></i> -->
              <!-- 图标 -->
              <div class="flex">
                <img :src="sunItem.img_url" alt="" style="width:12%" v-if="sunItem.img_url">
                <!-- <img :src="sunItem.img_url" alt="" style="width:20%" > -->
                <label class="flex-s-between" style="width:100%" v-if="sunItem.cid">
                  <div  class="flex-s-between" style="width:100%">
                    <span>{{$t('sideba.'+ sunItem.authName)}}</span>
                    <el-checkbox @change="menuChange" class="mgb-5" ></el-checkbox>
                  </div>
                </label>
                <label class="flex-s-between" style="width:100%" v-else>
                  <div  class="flex-s-between" style="width:100%">
                    {{ sunItem.authName }}
                    <el-checkbox @change="menuChange" class="mgb-5" ></el-checkbox>
                  </div>
                </label>
              </div>
              <!-- 文本 -->
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="rmenu" v-if="AsideType === 2">
      <el-menu
        text-color="#fff"
        active-text-color="#7DE9FF"
        default-active="0"
        :default-openeds="['0','1','2']"
        :collapse-transition="false"
        class="el-menu-vertical-demo font-20 fontW-b font-f-ib"
        :collapse="isCollapse"
        :unique-opened="true"
        @open="handleOpen"
        @select="hundleSelect"
        @close="handleClose"
        >
        <!-- 一级菜单 -->
        <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
          <!-- 一级菜单的模板区域 -->
          <template slot="title">
            <!-- 图标 -->
            <!-- <i :class="iconsObj[item.id]"></i> -->
            <!-- <i class="el-icon-menu"></i> -->
            <!-- 文本 -->
            <div class="flex-s-between">
            <span class="">{{$t('rankingMenu.'+ item.authName)}}</span>
            <img src="../../assets/icon/download.svg" alt="">
            </div>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item :index="sunItem.id + ''" v-for="sunItem in item.children" :key="sunItem.id">
            <template slot="title">
              <!-- 二级菜单的模板区域 -->
              <!-- <i class="el-icon-menu"></i> -->
              <!-- <i class="el-icon-s-help"></i> -->
              <!-- 图标 -->
              <img :src="sunItem.img_url" alt="" style="width:10%">
              <span  class="fontW-7 font-12 color-f" v-if="sunItem.cid">{{$t('rankingMenu.'+ sunItem.authName)}}</span>
              <span  class="fontW-7 font-12 color-f" v-else>{{ sunItem.authName }}</span>
              <!-- 文本 -->
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  name: 'asideItem',
  props: {
    menuList: {
      type: Array,
      default: () => []
    },
    isCollapse: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
    }
  },
  mounted () {
    // console.log(this.menuList, this.isCollapse)
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath, 'handleOpen', JSON.stringify(key))
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath, 'handleClose', JSON.stringify(key))
    },
    hundleSelect: function (key, keyPath) {
      console.log(key, keyPath, 'hundleSelect', JSON.stringify(key))
    }
  }
}
</script>
<style lang="less" scoped>
.aside {
  width: 100%;
  height: auto;
  /deep/.el-menu {
    background: none;
    /deep/.el-submenu__title {
      color: none;
    }
    /deep/.el-submenu__title:hover {
    background: none;
  }
    /deep/.el-submenu:hover {
      background: none;
    }
  }
  /deep/.el-checkbox__inner {
  width: 10px;
  height: 10px;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner {
  background: #7DE9FF;
  border-color: #7DE9FF;
}
/deep/.el-checkbox__inner::after{
  border: none;
}
/deep/.el-menu-item.is-active {
  color: #fff !important;;
}
/deep/.el-menu-item,.sunItemlabel{
  height: 35px !important;
  line-height: 35px !important;
}
/deep/.el-submenu .el-menu{
  max-height: 150px !important;
  overflow: scroll !important;
  background: #898989 !important;
  border-radius: 5px !important;
  margin-right: 5px !important;
}
/deep/.el-submenu__icon-arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -10px;
    font-size: 20px;
}
}
.hmenu {
  width: 100%;
  height: auto;
  /deep/.el-menu {
    background: none;
    /deep/.el-submenu__title {
      color: none;
      padding-left:10px;
      /deep/ .el-menu-item{
        padding-left:10px;
      }
    }
    /deep/.el-submenu__title:hover {
      background: none;
    }
    /deep/.el-submenu:hover {
      background: none;
    }
  }
  /deep/.el-submenu .el-menu{
      background: #898989;
      border-radius: 5px;
      margin: 0 5px 0 0;
  }
  /deep/.el-icon-arrow-down:before{
        display: none;
  }
  /deep/.el-checkbox__inner::after{
  border: none;
  }
  /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
  background: #7DE9FF;
  border-color: #7DE9FF;
  }
}
.rmenu {
  width: 100%;
  height: auto;
  /deep/.el-menu {
    background: none;
    /deep/.el-submenu__title {
      color: none;
    }
    /deep/.el-submenu__title:hover {
      background: none;
    }
    /deep/.el-submenu:hover {
      background: none;
    }
  }
  /deep/.el-submenu__title {
  background: #000;
  border-radius: 5px;
  }
  /deep/.el-submenu__title i{
    opacity: 0;
  }
}
</style>
<style>
.el-menu--vertical .el-menu{
  background: #585858;
}

</style>
